<template>
    <div class="login-box">
        <div class="welcome" v-if="welcome">
            <!-- 倒计时进入登录或者直接跳转到首页 -->
            <van-circle v-model="currentTime"
                layer-color="#F0D5B8"
                color="#C1AB96"
                style="position: absolute; top: 15px; right: 15px;"
                size="58px"
                :rate="currentTime"
                v-on:click.native="closeWelcome"
                :text="`${time}s`"/>
            <i class="icon">
                <img src="" alt="">
            </i>
        </div>
        <div class="login" v-else>
            <h3 @click="loginEvt">去首页</h3>
            <h3 @click="registerEvt">去注册</h3>
            
        </div>
    </div>
</template> 

<script>

    // 单个接口引入

    export default {
        data(){
            return{
                // 是否记住手机号
                remember: false,
                // 是否免登录
                auto: false,
                // 是否关闭广告
                welcome:true,
                // 倒计时秒数
                time: 5,
                currentTime: 100,
                // 欢迎页面定时器
                timer: null,
                // 免登录标识
                // 登录进行中 login、登陆成功 successs、登陆失败 error
                autoFlag: 'login',
                // 节流标识
                vdtText:'获取验证码',
                // 登录的节流标识
                loading:false
            }
        },
        async created(){
            // 欢迎页面需要一个倒计时
            this.timer = setInterval(() => {
                if (this.currentTime > 0) {
                    this.currentTime -= 1
                    this.time = Math.ceil(this.currentTime / 20)
                    // console.log('------------', this.currentTime)
                } else {
                    // 倒计时到了，就需要把欢迎页面关闭
                    // 关闭倒计时
                    clearInterval(this.timer),
                    this.timer = null
                    // 在生命周期期间获取免登录缓存标识，如果为success直接跳转到首页，如果在倒计时结社之前没有获取到，再关闭广告，进入登录界面
                    if (this.autoFlag === 'success') {
                        this.$router.push('/home')
                    } else {
                        // 在倒计时期间，如果没有获取到success就将广告页面关闭
                        this.welcome = false
                    }
                }
            }, 50)
        },
        methods: {
            closeWelcome(){
                // 判断是否处于免登录   登录进行中 login、登陆成功 successs、登陆失败 error
                if(this.autoFlag === 'login') return
                // 清除定时器
                clearInterval(this.timer)
            },
            loginEvt(){
                this.$router.push('/home')
            },
            registerEvt(){
                this.$router.push('/Register')
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../style/common.less";
    .login-box {
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
        .welcome {
            height: 100%;
            width: 100%;
            .icon {
                display: block;
                width: 100%;
                height: 100%;
                background: url(../../images/login/background.png) center center / 100% 100% no-repeat;
                font-size: .8rem;
                text-align: center;
                color:#F8E6D3;
                line-height: 900px;
            }
        }
    }
</style>